<template>
    <div>
        <!--头部-->
        <m-header :hasBack="true" :hasTitle="true" title="支付成功" :goBack.stop="goHome"></m-header>
        <div style="height: 3rem;"></div>
        <!--头部end-->
        <div class="centent">
            <div class="successful_pay">
                <i class="icon njfont nj-chenggong"></i>
                 <h1 v-if ='realPay'>¥{{realPay}}</h1>
                 <h1 v-else>¥0.00</h1>
                 <!-- <h1 v-if='payAmount'>¥{{payAmount}}</h1> -->
                 <!-- <h1 v-if='!orderFee.realPay && orderFee.feeDetails'>¥{{(orderFee.feeDetails[0].payAmount).toFixed(2)}}</h1> -->
                <div class="package">
                    <div v-if='type==1 || scanOrder==1'>支付成功</div>
                    <div v-else>
                        <p v-if="orderType!==1 && orderType!==3 && orderType!==4">您的包裹整装待发</p>
                        <ul class="packageList" v-if="packageList.length !== 0">
                            <li v-for=" (val, key) in packageList" :key="key">
                                <span class="dispatchLeft_p">包裹{{key+1}}:</span>
                                <span style="color:#444; font-weight:bold">预计 {{deliveryTime(val[0].expecteDeliveryStartTm)}} {{packgeGetTime(val[0].expecteDeliveryStartTm)}}-{{packgeGetTime(val[0].expecteDeliveryEndTm)}}</span>  送达
                            </li>
                        </ul>
                    </div>
                </div> 
                <ul class="payList">
                    <li class="payType_methods"  v-for="feeItem in orderFee.feeDetails">
                        <p v-show="feeItem.payType != -1 && feeItem.payType != 6">
                            <span>{{payTypefunction(feeItem.payType)}}</span>
                            <font class="payType_method_font">¥{{(feeItem.payAmount).toFixed(2)}}</font>
                        </p>
                    </li>
                </ul>
                <div class="aui-btn aui-btn-outlined aui-btn-danger" @click.stop="goToOrderList">查看订单</div>
                <div class="aui-btn aui-btn-outlined aui-btn-danger" @click.stop="goHome">返回首页</div>
                <p class="showTm"><span style="color: #EA3939;">{{time}}</span>秒后自动返回商城首页</p>
            </div>
        </div>
        <!-- 优惠券弹窗 -->
        <my-coupons v-if='hasCoupon' :mycouponsdata = 'mycouponsdata'  @goOpenConpons="goOpenConpons"></my-coupons>
    </div>
</template>
<script>
// import api from "../../api";
import Header from "../header";
import myCoupons from '../../real-components/showCoupons';
import { orderDetails} from '../../api/wxh/getData.js';
import axios from "axios";
export default {
    props: {

    },
    data() {
        return {
            time: 5,
            timer: null,
            orderFee:[], 
            realPay:null,
            payAmount:null,
            packageList:[],
            type:'',
            scanOrder:'',
            hasCoupon:false,
            mycouponsdata:[],
            inThePage:true

        }
    },
    computed: {
        //获取订单编号
        orderType() {
            console.log("支付成功页面", this.$route.params.orderType);
            return this.$route.params.orderType;
        },
    },
    components: {
        "m-header": Header,
        "my-coupons":myCoupons
    },
    methods: {
        goToOrderList() {
            this.inThePage = false;
            if (parseInt(this.orderType) === 2 || parseInt(this.orderType) === 0) {
                this.$router.replace({path: `order`, query: {orderStatus: 2}});
            } else if (parseInt(this.orderType) === 1 || parseInt(this.orderType) === 4) {
                //跳转到全部页面
                this.$router.replace({path: `order`, query: {orderStatus: 0}});
            }
        },
        goHome() {
            //取消定时器
            if (this.timer) {
                clearInterval(this.timer);
                 this.timer = null;
            }
             this.$router.replace({path: `home`});
            
        },
        async getOrderInfo() {
            let orderNo = this.$route.params.orderNo
            let res = await orderDetails(orderNo);
            console.log(res,'sssssssssssssss')
            let sess = window.localStorage.getItem('sessionId');
            setTimeout(()=>{
                this.orderFee = res.data[0].orderFee;
            },3000)
            this.orderFee = res.data[0].orderFee;
            console.log(this.orderFee,'打印数据')
            this.realPay = this.orderFee.realPay ? (this.orderFee.realPay).toFixed(2) : ''
            this.payAmount = this.orderFee.feeDetails[0].payAmount ? this.orderFee.feeDetails[0].payAmount.toFixed(2) : ''
            this.packageList = res.data[0].orderDetailDTOList[0].orderPackageDTOList || [];
            this.type =  res.data[0].orderDetailDTOList[0].orderType
            this.scanOrder =  res.data[0].orderDetailDTOList[0].scanOrder

            // 优惠券弹窗接口
            let options = {
                method: "get",
                url: api.trade_host + "/marketCenter/getVirtualGiftInfo/" + orderNo,
                headers: {sessionId: localStorage.getItem("sessionId")}
            };
            axios(options).then(resdata => {
                console.log(resdata,'resdata')
                if (resdata.data.returnCode != 0 && resdata.data.data.length > 0 ) {
                    this.hasCoupon = true
                    this.mycouponsdata = resdata.data.data
                } else {
                   this.inThePage && this.countDown();
                     
                }
            })
        },
        deliveryTime(time) {
            function checkTime(i) {
                if(i < 10) {
                    i = '0' + i;
                }
                return i;
            }
            let date1 = new Date(time);
            let d = new Date();
            let date = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
            let year = date1.getFullYear();
            let month = checkTime(date1.getMonth() + 1);
            let day = checkTime(date1.getDate());
            let expdate = year + '-' + month + '-' + day;
            let expdateShow = month + '-' + day;
            let realDay_str = date.replace(/-/g, '/');
            let realDay1_str = expdate.replace(/-/g, '/');
        
            let realDay = new Date(String(realDay_str)).getTime() - new Date(String(realDay1_str)).getTime();			 
            let days = parseInt(realDay / (1000 * 60 * 60 * 24));
        
            if(days == 0) {

                return '今天'
            } else if(days == -1) {

                return '明天'
            } else {

                return expdateShow
            }
        },
        packgeGetTime(param, type) {
            if(!param) {
                return
            }
            let date = new Date(param);
            let year = date.getFullYear();
            let month = checkTime(date.getMonth() + 1);
            let day = checkTime(date.getDate());
            let hour = checkTime(date.getHours());
            let min = checkTime(date.getMinutes());
            let sec = checkTime(date.getSeconds());

            function checkTime(i) {
                if(i < 10) {
                    i = '0' + i;
                }
                return i;
            }

            if(type === 1) {
                return day + '天' + hour + '小时' + min + '分';
            }
            return hour + ':' + min;
        },
        payTypefunction(type) {
            let a;
            switch(type) {
                case 1:
                    a = '支付宝支付';
                    break;
                case 2:
                    a = '银联支付';
                    break;
                case 3:
                    a = '微信支付';
                    break;
                case 4:
                    a = '工行支付';
                    break;
                case 5:
                    a = '现金支付';
                    break;
                case 6:
                    a = '优惠券支付';
                    break;
                case 7:
                    a = '银联支付';
                    break;
                case 8:
                    a = '威富通';
                    break;
                case 9:
                    a = '钱包余额支付';
                    break;
                case 20:
                    a = '邮费支付';
                    break;
                case 21:
                    a = '积分支付';
                    break;
                case 96:
                    a = '线下银联活动';
                    break;
                case 97:
                    a = '线下银联';
                    break;
                case 98:
                    a = '线下微信';
                    break;
                case 99:
                    a = '线下支付宝';
                    break;	    
                default:
                    a = '';
            }
            return a
        },
        goBack() {
            this.goHome();
        },
        setNativeBackFlagForPayIsFalse() {
            this.$store.commit("setNativeBackFlagForPay", false);
        },

        // 关闭优惠券弹窗
        goOpenConpons() {
            console.log('关闭了！')
            this.hasCoupon = false;
            this.countDown();    
        },
        // 支付倒计时5s返回到首页
        countDown() {
            if (!this.timer) {
                this.timer = setInterval(() => {
                    if (this.time === 0) {
                        clearInterval(this.timer);
                        this.timer = null;
                        this.goHome();
                        return;
                    }
                    this.time = this.time - 1;
                }, 1000);
            }
        }
    },
    created () {
        // console.log("这是支付成功页面");
        this.setNativeBackFlagForPayIsFalse();
        this.getOrderInfo();
        //  支付回调接口
        let orderNo = this.$route.params.orderNo
        let options = {
            method: "post",
            url: api.trade_host + "/payment/asyHandeNotify/" + orderNo,
            headers: {sessionId: localStorage.getItem("sessionId")}
        };
        axios(options).then(resdata => {
            console.log(resdata,'resdata')
        })
    },
    async beforeRouteLeave(toRoute, fromRoute, next) {
     //取消定时器
      if (this.timer) {
            clearInterval(this.timer);
            this.timer = null;
        }
      next()
    },
    // beforeDestory() {
    //     //取消定时器
    //     if (this.timer) {
    //         clearInterval(this.timer);
    //         this.timer = null;
    //     }
    // }

}
</script>

<style scoped>
.successful_pay i {
    display: inline-block;
    font-size: 3rem;
    color: #38B035;
    /* background: #; */
    border-radius: 100%;
    /* padding: 0.5rem; */
}
.successful_pay .showTm{
    margin-top: 10px;
}
.aui-btn {
    margin: 0 10px;
}
.package p {
    color: #333;
}
.payList {
    width: 80%;
    margin:1.5rem auto;
    /* border-top: 1px solid #ddd;    */
}
.payList .payType_methods {
    
}
.payType_methods p {
    display: flex;
    line-height: 1.8rem;
    height: 1.8rem;
    border-bottom: 1px solid #ddd;
    font-size: 0.65rem;
    color: #888;
}
.payType_methods p:nth-of-type(1) {
    border-top: 1px solid #ddd;
}
.payType_methods span {
    flex: 1;
    text-align: left
}
.payType_methods font {
    flex: 1;
    text-align: right;
    font-size: 0.8rem;
}
.successful_pay .aui-btn-danger.aui-btn-outlined{
    border: 1px solid #ddd !important;
    border-radius: 1rem;
    color: #666 !important;
    padding: 0 2rem;
}
.successful_pay h1 {
    font-size: 1.6rem;
    margin-top: 0.5rem;
}
</style>


